import React, { useState } from 'react'
import Mynav from '../../components/Mynav'
import styles from './css/reg.module.css'
import { Form, Input, Button, Toast } from 'antd-mobile'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import { getZhuApi } from '../../api/deng'
import {useNavigate} from 'react-router-dom'
function Index() {
  const [form] = Form.useForm()
  const [visible, setVisible] = useState(false)
  const [visible2, setVisible2] = useState(false)
  const nav=useNavigate()

  const onFinish = async (values) => {
    console.log(values);
    await getZhuApi(values)
    Toast.show({
      icon: 'success',
      content: '注册成功',
    })

  }
  return (

    <div className={styles.zhu}>
      <Mynav title='注册页面' />

      <Form layout='horizontal' mode='card'


        footer={
          <div>
            <Button block type='submit' color='primary' shape='rounded'>
              注册
            </Button>

           <Button block type='login' color='warning' shape='rounded' onClick={()=>nav('/login')} style={{marginTop:'15px'}}>
              去登录
            </Button>

          </div>

        }
        form={form}
        onFinish={onFinish}
      >

        <Form.Item
          label='用户名'
          name="username"
          rules={[
            {
              required: true, message: '请输入用户名'
            }
          ]}
        >
          <Input placeholder='请输入用户名' />
        </Form.Item>


        <Form.Item
          label='密码'
          name="password"
          //小眼睛
          extra={
            <div className={styles.eye}>
              {!visible ? (
                <EyeInvisibleOutline onClick={() => setVisible(true)} />
              ) : (
                <EyeOutline onClick={() => setVisible(false)} />
              )}
            </div>
          }
          //校验
          rules={[
            {
              required: true, message: '请输入密码'
            },
            {
              pattern: /^(?!\d+$)(?![a-zA-Z] +$)[a-zA-Z0-9]{6,15}$/, message: '密码长度是6-15位'
            }
          ]}
        >


          <Input placeholder='请输入密码' type={visible ? 'text' : 'password'} />
        </Form.Item>




        <Form.Item
          label='确认密码'
          name="repassword"


          //两次密码不一致
          dependencies={['password']}
          //只出现一个校验
          validateFirst
          //小眼睛
          extra={
            <div className={styles.eye}>
              {!visible2 ? (
                <EyeInvisibleOutline onClick={() => setVisible2(true)} />
              ) : (
                <EyeOutline onClick={() => setVisible2(false)} />
              )}
            </div>
          }

          rules={[
            {
              required: true, message: '请输入密码'
            },
            {
              pattern: /^(?!\d+$)(?![a-zA-Z] +$)[a-zA-Z0-9]{6,15}$/, message: '密码长度是6-15位'
            },
            {
              //validator函数，是自定义的'校验器函数'
              validator(_, p2) {
                console.log(p2);
                const p1 = form.getFieldValue('password')
                if (p1 === p2) {
                  return Promise.resolve()
                }
                else {
                  return Promise.reject()
                }
              },
              message: '两次密码不一致'
            }
          ]}
        >
          <Input placeholder='请确认密码' type={visible2 ? 'text' : 'password'} />
        </Form.Item>



      </Form>


    </div>
  )
}

export default Index
